<script setup>
import { ref, reactive, toRefs } from "vue"
import product from "@/page/product/index.vue";
import equipment from "@/page/equipment/index.vue";
import test from "@/page/test/index.vue";
import design from "@/page/design/index.vue";
import fabricate from "@/page/fabricate/index.vue";
import green from "@/page/green/index.vue";
import { useRoute } from "vue-router";
const route = useRoute();
const id = ref()
id.value = route.query.id;
</script>

<template>
    <div>
        <el-tabs type="border-card" class="demo-tabs">
            <el-tab-pane label="Config"><template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <img class="img-style" src="@/assets/images/certiIcon/yeji.png" alt="">
                        </el-icon>
                        <span class="padding-style">产品业绩</span>
                    </span>
                </template>
                <product :idKey="id"></product>
            </el-tab-pane>
            <el-tab-pane label="Role"><template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <img class="img-style" src="@/assets/images/certiIcon/shebei.png" alt="">
                        </el-icon>
                        <span class="padding-style">生产设备</span>
                    </span>
                </template>
                <equipment :idKey="id"></equipment>
            </el-tab-pane>
            <el-tab-pane label="Task"><template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <img class="img-style" src="@/assets/images/certiIcon/shiyan.png" alt="">
                        </el-icon>
                        <span class="padding-style">试验设备</span>
                    </span>
                </template>
                <test :idKey="id"></test>
            </el-tab-pane>
            <el-tab-pane label="Task"><template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <img class="img-style" src="@/assets/images/certiIcon/yanfa.png" alt="">
                        </el-icon>
                        <span class="padding-style">研发设计</span>
                    </span>
                </template>
                <design :idKey="id"></design>
            </el-tab-pane>
            <el-tab-pane label="Task"><template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <img class="img-style" src="@/assets/images/certiIcon/zhizao.png" alt="">
                        </el-icon>
                        <span class="padding-style">数字制造</span>
                    </span>
                </template>
                <fabricate :idKey="id"></fabricate>
            </el-tab-pane>
            <el-tab-pane label="Task"><template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <img class="img-style" src="@/assets/images/certiIcon/ditan.png" alt="">
                        </el-icon>
                        <span class="padding-style">低碳绿能</span>
                    </span>
                </template>
                <green :idKey="id"></green>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style lang="scss" scoped>
.img-style {
    width: 20px;
    height: 20px;
}

.padding-style {
    padding-left: 5px;
}
</style>